Estoy trabajando en un sitio web y allí para usar Svelte y la biblioteca de enrutamiento svelte. La biblioteca de enrutamiento esbelto tiene un método llamado navegar (ruta). Utilizo esta función con un clic de un botón y funciona perfectamente. Pero en mi archivo routeHandling.js no funciona como se esperaba. Puedo ver que configura la URL en el navegador pero permanece en la misma página, así que tengo que presionar F5 (recargar la página) para cargar la página.
import {navigate} from "svelte-routing"; import * as axios from "axios"; export function checkLoggedIn() { console.log("checkLoggedIn is now getting executed"); if (window.location.pathname !== "/" && window.location.pathname !== "/registration") { axios.default.get('http://127.0.0.1:5000/user', { headers: { 'Authorization': `${localStorage.getItem("token")}` } }).catch(response => { navigate("/"); }); } }¡Gracias por adelantado!
necesita usar el método de navigate dentro de un componente esbelto. Intente crear un método que llame al método checkLogggedIn() desde su componente esbelto y navigate() al regresar con éxito.
import checkLoggedIn from "./router"; import {navigate} from "svelte-routing"; const checkUser = async () => { let res = await checkLoggedIn(); if (res.status === 200) { navigate('/') } else { navigate('/login') } }Algo como esto debería funcionar. querrá esperar la respuesta antes de navegar, así que lo convertí en una función asíncrona
Otra cosa que querrá verificar es si está usando el indicador -s or -single cuando comienza svelte. Verifique sus scripts de NPM.
En caso de que sea nuevo en el enrutamiento esbelto: debe agregar un Router a su aplicación y crear rutas con los componentes que se representarán en ellos. como esto
<Router> <Route path="home"> <Home /> </Route> <Route path="about"> <About /> <Route /> </Router> donde <Home /> y <About /> son componentes que le gustaría representar en esas rutas.
Puede usar location.replace("/") para recargar y obtener todos los componentes. Pero está eliminando el historial de la primera página para que no pueda volver atrás.
const checkUser = async () => { let res = await checkLoggedIn(); if (res.status === 200) { location.replace("/"); } else { navigate('/login') } } o podrías hacer un location.reload(); después de navegar para mantener el historial
if (res.status === 200) { navigate('/') location.reload(); } else { navigate('/login') } }